<template>
    <view class="page" @click="dropDrownVisible=false">
        <!-- <TopBar :showName='showName' :BackgroundColor.sync="BackgroundColor"></TopBar> -->
<!--            end-->

<!--            <view class="home-header-bottom">-->
<!--&lt;!&ndash;                活动轮播&ndash;&gt;-->
<!--                <view class="index-banner" v-if="bannerType">-->
<!--                    <swiper class="banner-swiper" autoplay="true" interval="2000" duration="1500"	>-->
<!--                        <swiper-item>-->
<!--&lt;!&ndash;                            <img src="/static/img/123.jpg" />&ndash;&gt;-->
<!--                        </swiper-item>-->
<!--                        <swiper-item>-->
<!--&lt;!&ndash;                            <img src="/static/img/123.jpg" />&ndash;&gt;-->
<!--                        </swiper-item>-->
<!--                        <swiper-item>-->
<!--&lt;!&ndash;                            <img src="/static/img/123.jpg" />&ndash;&gt;-->
<!--                        </swiper-item>-->
<!--                    </swiper>-->
<!--                </view>-->
<!--&lt;!&ndash;                end&ndash;&gt;-->
<!--            </view>-->
<!--        end-->

<!--        圈子主页内容-->
        <view class="home-tbody" style="margin-top:0">
            <!--                end-->
<!--            内容页导航-->
			<view class="home-tbody-nav">
				<view class="home-nav-left">
					<view :class="classify_id==''?'on':''" @click="switchPostList()">全部<span></span></view>
					<view v-for="item in sortList" :key="item.id" :class="classify_id==item.classify_id?'on':''" @click="switchPostList(item.classify_id)">{{item.classify_name}}<span></span></view>
				</view>
				<view class="visit-sort-select" @click="onSelectshow">
					<img style="width: 28px;height: 28px" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/sort-a.png">
					<view class="select-item" v-if="Selectshow">
						<text data-name="最新发帖" @click="onSelectTitle">最新发帖</text>
						<text data-name="浏览热度" @click="onSelectTitle">浏览热度</text>
						<text data-name="最近浏览" @click="onSelectTitle">最近浏览</text>
						<text data-name="热门推荐" @click="onSelectTitle">热门推荐</text>
					</view>
				</view>
			</view>
<!--            end-->

<!--            内容列表筛选-->
<!--            <view class="follow-visit-sort">-->
<!--                <view class="visit-sort-select" @click="onSelectshow">-->
<!--                    <text>{{SelectTitle}}</text>-->
<!--                    <img style="width: 16px;height: 16px" src="/static/img/down.png">-->
<!--                    <view class="select-item" v-if="Selectshow">-->
<!--                        <text data-name="最新发帖" @click="onSelectTitle">最新发帖</text>-->
<!--                        <text data-name="浏览热度" @click="onSelectTitle">浏览热度</text>-->
<!--                        <text data-name="最近浏览" @click="onSelectTitle">最近浏览</text>-->
<!--                        <text data-name="热门推荐" @click="onSelectTitle">热门推荐</text>-->
<!--                    </view>-->
<!--                </view>-->
<!--            </view>-->
<!--            end-->

<!--            内容列表-->
            <view class="home-tbody-list backgroundColor">
                <view class="tbody-list-null" v-if="circlePostList.length == 0">暂无用户发帖</view>
                <Invitation
                 :Article.sync="circleDetail.article"
                 :isAdmin="true"
                  v-if="circleDetail.article.length > 0"></Invitation>
            </view>
<!--            end-->
        </view>
<!--        end-->

<!--        发帖按钮-->
        <Posting-btn :fatherValue.sync="HidePost" :Isfollow="circleDetail"></Posting-btn>
<!--        end-->

<!--        底部弹出框-->
        <van-popup :show="show" position="center" @click="onpopup" round>
            <div class="register-wrapper">
				<div class="header">
					<image src="/static/img/delbtn-black.png" @click="show=false"></image>
				</div>
				<div class="logo">
					<image :src="dakaMsg.photo_url"></image>
					<div class="tag">{{dakaMsg.user_grade}}</div>
				</div>
				<div class="bar-wrapper">
					<div class="bar-item" v-for="(item,index) of registerBar" :key="index">
						<div :class="{'circle':true,circleActive:item.is_daka==true}"></div>
						<div :class="{'bar':true,barActive:item.is_daka==true}"></div>
						<div :class="{'circle':true,circleActive:item.is_daka==true}" v-if="index==registerBar.length-1"></div>
					</div>
					<div class="first">第一天</div>
					<div class="last">超级fun</div>
				</div>
				<div class="day">
					连续签到<span>{{signtimes}}</span>天
				</div>
				<div class="tip">
					<div>连续签到1-10天，每天增加10经验值</div>
					<div>连续签到11~20天，每天增加20经验值</div>
					<div>连续签到21~30天，每天增加30经验值</div>
					<div>每个月有3次补签机会</div>
				</div>
				<div class="btn-wrapper">
					<div class="btn" @click="circleDaka('daka')" v-if="today_is_daka==0">签到</div>
					<div class="btn" @click="circleDaka('daka')" v-if="today_is_daka!=0">已签到</div>
					<div class="btn" @click="circleDaka('make_up')" v-if="today_is_daka==1">补签</div>
				</div>
			</div>
        </van-popup>
<!--        end-->

    </view>
</template>

<script>
    import PostingBtn from "@/pages/components/posting-btn/posting-btn";
    import Invitation from "@/pages/components/invitationItems/invitation";
    import TopBar from "@/pages/components/topBar/topBar";
    export default {
        name: "circlebarhome",
        components: {TopBar, Invitation, PostingBtn},
        data(){
            return{
				dropDrownVisible:false,//显示下拉菜单
                navigationbarHeight: getApp().globalData.navStyle.navigationbarHeight,
                sortList:{},
                Selectshow: false,
                SelectTitle: '最新发帖',
                HidePost: false,
                circle_id : '',
                circleDetail:{},
                circlePostList:{},
                listPage: 1,
                classify_id: '',
                showName: 'back',
                BackgroundColor: false,
                show:false,
				registerBar:[
					{is_daka:false},
					{is_daka:false},
					{is_daka:false},
					{is_daka:false},
					{is_daka:false},
					{is_daka:false},
					{is_daka:false},
					{is_daka:false},
					{is_daka:false},
					{is_daka:false}
				],//签到的进度条长度
				today_is_daka:'',//今天欠到状态0，未签到，1可补签，2不可补签
				signtimes:0,//签到的天数
				dakaMsg:'',//打卡的信息
                rankList:[] //圈子榜单前三
            }
        },
        onLoad(query){
            this.circle_id = query.circle_id;
            // uni.setStorageSync('circle_id',this.circle_id);
            this.getEnableArticleClassify();
			this.getCircleDakaStatus();
        },
        onShow(){
            this.getArticleList();
            this.circleUserLeaderBoard();
        },
        //上拉刷新
        onPullDownRefresh(){
            uni.stopPullDownRefresh()
            this.onWXshow();
            // uni.showNavigationBarLoading()
            // setTimeout(() => {
            //     uni.hideNavigationBarLoading()
            //     uni.stopPullDownRefresh()
            // }, 2000);
        },
        methods:{
            //选择查看帖子列表
            switchPostList(id=""){
                this.classify_id = id;
                this.getArticleList()
            },
            onpopup(){
                if (this.show){
                    this.show = false;
                } else {
                    this.show = true;
                }

            },
			toCircleMain(){
				//跳转圈子简介
				uni.navigateTo({
					url:`/pages/circlebar/circlebarMain/circlebarMain?circle_id=${this.circle_id}`
				})
			},
			toCircleApply(){
				//跳转圈子申请页
				this.dropDrownVisible=false;
				uni.navigateTo({
					url:'/pages/circlebar/circleApply/circleApply?circle_id=${this.circle_id}'
				})
			},
            onWXshow(){
                this.getArticleList();
                this.getEnableArticleClassify();
            },
            //获取哔哔榜用户列表
            async circleUserLeaderBoard(){
                let params = {
                    page: 1,
                    limit: 3,
                    circle_id: this.circle_id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.circleUserLeaderBoard(params);
                if (res.data.level == 'success'){
                    this.rankList = res.data.data;
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //获取圈子帖子分类
            async getEnableArticleClassify(){
                let params = {
                    circle_id: this.circle_id,
                    user_token: uni.getStorageSync('userToken'),
                }
                const res = await this.$api.getEnableArticleClassify(params);
                if (res.data.level == 'success'){
                    this.sortList = res.data.data;
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //获取圈子首页帖子列表+最新评论
            async getArticleList(){
                let params = {
                    circle_id: this.circle_id,
                    user_token: uni.getStorageSync('userToken'),
                    limit:10,
                    page: this.listPage,
                    classify_id: this.classify_id,
					type:'admin'
                }
                const res = await this.$api.getCircleArticle(params);
                if (res.data.level == 'success'){
                    this.circleDetail = res.data.data;
                    this.circlePostList = res.data.data.article;
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //关注圈子
            async followCircle(){
                let params = {
                    circle_id: this.circle_id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.followCircle(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.circleDetail.is_follow=1
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //排序展开
            onSelectshow(){
                if (this.Selectshow == false){
                    this.Selectshow = true;
                }else {
                    this.Selectshow = false;
                }
            },
            //排序标题
            onSelectTitle(e){
                this.SelectTitle = e.currentTarget.dataset.name;
            },
            //跳转到榜单列表
            skipRanklist(){
                uni.navigateTo({
                    url: '/pages/circlebar/circlebarhome/rankList/rankList?circle_id='+this.circle_id
                })
            },
			async getCircleDakaStatus(){
				//获取打卡情况
				let params={
					user_token:uni.getStorageSync('userToken'),
					circle_id:this.circle_id
				}
				let res=await this.$api.getCircleDakaStatus(params);
				if(res.data.level=='success'){
					this.registerBar=res.data.data;
					this.signtimes=res.data.signtimes;
					this.dakaMsg=res.data.user_info;
					this.today_is_daka=res.data.today_is_daka;//今天是否已打卡
				}
			},
			async circleDaka(type){
				//打卡，补打
				let params={
					circle_id:this.circle_id,
					type,
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.circleDaka(params);
				if(res.data.level=='success'){
					this.getCircleDakaStatus()
				}
				uni.showToast({
					icon:'none',
					title:res.data.message
				})
			},
            //分享圈子
            sharingCircles(){
                uni.navigateTo({
                    url:"/pages/sharePost/shareCircle/shareCircle?circle_id="+this.circle_id
                })
            },
        }
    }
</script>

<style scoped lang="scss">
	@import '~@/static/scss/mixin.scss';
    .page{
        background: #F1F4F7;
    }
    .home-header{
        /*background: #ffffff;*/
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .home-header-title{
            background: rgba(13, 15, 20, 0.8);
            padding: 60rpx 30rpx;
            color: #ffffff;
        }
        .home-header-top{
            display: flex;
            flex-direction: row;
            justify-content: left;
            /*align-items: center;*/
            /*text-align: center;*/
            .header-top-left{
                width: 16vw;
                height: 16vw;
                border-radius: 20rpx;
            }
            .header-top-center{
                width: 60vw;
                height: 16vw;
                padding: 0 4vw;
                display: flex;
                flex-direction: column;
                justify-content: center;
                h4{
                    width:auto;
                    font-size: 40rpx;
                    background: #000000;
                    padding: 6rpx;
                    display: inline-block;
                }
                text{
                    font-size: 24rpx;
                    background: #000000;
                    padding: 6rpx;
                    display: inline-block;
                    max-width:100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-wrap: break-word;
                    white-space: normal !important;
                }
            }
            .header-top-right{
                width: 6vw;
                height: 6vw;
                padding: 5vw 0vw 5vw 6vw;
            }
            /*.header-top-renown{*/
            /*    line-height: 50rpx;*/
            /*    font-size: 28rpx;*/
            /*}*/
            /*.header-top-btn{*/
            /*    padding: 10rpx 20rpx;*/
            /*    background: #FF0000;*/
            /*    border-radius: 10rpx;*/
            /*}*/
            .header-bottom-ranking{
                padding: 20rpx 30rpx;
                view{
                    display: inline-block;
                    vertical-align: middle;
                    line-height: 50rpx;
                    font-weight: bold;
                }
                .ranking-title{
                    color: #f0ad4e;
                    img{
                        display: inline-block;
                        width: 32rpx;
                        height: 32rpx;
                        vertical-align: middle;
                    }
                }
                .ranking-img{
                    margin-left: 30rpx;
                    margin-top: 5rpx;
                    height: 50rpx;
                    overflow: visible;
                    img{
                        margin: 5rpx -10rpx;
                        width: 40rpx;
                        height: 40rpx;
                        position: relative;
                    }
                }
                .circlebar-signin{
                    float: right;
                    color: #f0ad4e;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                        margin: 5rpx;
                        vertical-align: middle;
                    }
                }
            }
        }
        .home-header-center{
            margin-top: 20rpx;
            padding: 20rpx 0;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            height: 50rpx;
            border-bottom: 2rpx solid rgba(255,255,255,0.2);
            .header-center-left{
                vertical-align: middle;
                line-height: 50rpx;
                font-size: 24rpx;
                flex:1;
            }
            .header-center-right{
                vertical-align: middle;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .right-install-btn{
					position: relative;
                    button{
                        background: rgba(255,255,255,1);
                        border-radius: 10rpx;
                        font-weight: ceil(600);
                    }
                    .guanzhu-btn{
                        width: 100%;
                        height: 100%;
                        background: #FFE226;
                        border-radius: 10rpx;
                        font-weight: bolder;
                    }
                    img{
                        height: 60rpx;
                        width: 60rpx;
                        padding: 10rpx;
                        background-color: #000000;
                        border-radius: 10rpx;
                    }
					.dropdown-wrapper{
						background: #000;
						position: absolute;
						width: auto;
						color: #ffffff;
						white-space: nowrap;
						padding:20rpx;
						border-radius: 5rpx;
                        top: 60rpx;
                        right: 6rpx;
                        div{
                            font-size: 28rpx;
                            padding: 20rpx 0;
                            text-align: center;
                        }
					}
                }
                .right-signin-btn{
                    margin-left: 10rpx;
                    button{
                        width: 100%;
                        height: 100%;
                        background: #FFE226;
                        border-radius: 10rpx;
                        font-weight: bolder;
                    }
                }
            }
        }
        .home-header-bottom{
            padding: 20rpx 0;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            .header-bottom-left{
                width: 70%;
                display: flex;
                flex-direction: row;
                justify-content: left;
                align-items: center;
                .text{
                    font-size: 26rpx;
                    line-height: 36rpx;
                }
                .portrait{
                    padding: 0 10rpx 0 30rpx;
                    img{
                        width: 36rpx;
                        height: 36rpx;
                        position: relative;
                        margin-left: -10rpx;
                        border-radius: 360rpx;
                    }
                }
                .more{
                    img{
                        width: 30rpx;
                        height: 30rpx;
                    }
                }
            }
            .header-bottom-right{
                width: 30%;
                text-align: right;
                button{
                    font-size: 22rpx;
                    font-weight: ceil(600);
                    background:rgba(255,255,255,0.1);
                    color: #ffffff;
                    border-radius:4px;
                }
            }
        }
    }
    .home-tbody{
        /*background: #ffffff;*/
        margin-top: -60rpx;
        .header-bottom-istop{
            background: #ffffff;
            border-radius: 30rpx;
            padding: 0 30rpx;
            .bottom-istop-item{
                padding: 30rpx 0;
                display: flex;
                flex-direction: row;
                justify-content: left;
                align-items: center;
                height: 50rpx;
                border-bottom: 2rpx solid rgb(211, 211, 211);
                .istop-item-left{
                    width: 10%;
                    img{
                        width: 50rpx;
                        height: 50rpx;
                    }
                }
                .istop-item-title{
                    width: 80%;
                }
                .istop-item-right{
                    width: 10%;
                    text-align: right;
                    img{
                        width: 40rpx;
                        height: 40rpx;
                    }
                }
            }
        }
		.home-tbody-nav{
			margin-top: 20rpx;
			padding: 10rpx;
			background: #ffffff;
			border-bottom: 2rpx solid #dfdfdf;
			view{
				display: inline-block;
				font-size: 30rpx;
				padding: 10rpx 20rpx;
				color: #999999;
				font-weight: bold;
			}
			.home-nav-left{
				max-width: 90%;
				padding: 20rpx 0;
				overflow: hidden;
				overflow-x: scroll;
				overflow-y: hidden;
				color: #BBBCBF;
				view{
					display: inline-block;
					font-size: 30rpx;
					padding: 0rpx 20rpx;
					color: #999999;
					font-weight: bold;
				}
				.on{
					color: #000000;
					position: relative;
					overflow: visible;
				}
				.on span{
					position: absolute;
					display: inline-block;
					z-index: 11;
					height: 16rpx;
					width: 60%;
					background: rgba(254, 210, 44, 0.6);
					bottom: -10rpx;
					left: 20%;
				}
			}

		}
        .follow-visit-sort{
            padding: 20rpx;
            margin-top: 0;
            font-size: 30rpx;
            width: auto;
            color: #676767;
        }
        .home-tbody-list{
            background: #ffffff;
            /*padding: 10rpx 20rpx;*/
            .tbody-list-null{
                background: #ffffff;
                text-align: center;
                padding: 40rpx;
            }
        }
		
		
    }
	.register-wrapper{
		width: 80vw;
		min-height: 500rpx;
		.header{
			image{
				width:40rpx;
				height: 40rpx;
			}
			margin:20rpx;
		}
		.logo{
			text-align: center;
			image{
				width:100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
			.tag{
				margin-top:10rpx;
				font-size:20rpx;
			}
		}
		.bar-wrapper{
			margin:50rpx 20rpx;
			@include flex();
			position: relative;
			.bar-item{
				@include flex();
				.circle{
					border-radius: 50%;
					background:#fff ;
					height: 20rpx;
					width: 20rpx;
					border:6rpx solid #E5E6E7;
				}
				.circleActive{
					background:#FFE226 ;
					border:6rpx solid rgba(41,41,41,1);
					
					
				}
				.bar{
					width: 30rpx;
					height: 10rpx;
					background:#E5E6E7 ;
					
					
				}
				.barActive{
					background:rgba(41,41,41,1) ;
					
				}
			}
			.first{
				position: absolute;
				bottom: -30rpx;
				left:0;
				color:#292929;
				font-size: 20rpx;
			}
			.last{
				position: absolute;
				bottom: -30rpx;
				right:0;
				// color:#292929;
				color:#8B8D93;
				font-size: 20rpx;
			}
		}
		
		.day{
			width: 100%;
			text-align: center;
			margin:30rpx 0;
			font-size:32rpx;
			font-weight:600;
			line-height: 32rpx;
			span{
				background: #FFE226;
				display: inline-block;
				padding:20rpx;
			}
		}
		.tip{
			text-align: center;
			font-size:22rpx;
			color:rgba(0,0,0,1);
			line-height:32rpx;
			padding-bottom: 150rpx;
		}
		.btn-wrapper{
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background: #FFE226;
			@include flex();
			.btn{
				width:188rpx;
				height:68rpx;
				border-radius:42rpx;
				border:4rpx solid rgba(41,41,41,1);
				text-align: center;
				line-height: 68rpx;
				font-size:28rpx;
			}
		}
	}
</style>